<!-- page content -->
<div id="myVue" class="right_col" role="main">
    <div class="">
        <div class="page-title">
            <div class="title_left">
                <h3>
                    Vue Index Page
                </h3>
            </div>
        </div>
        <div class="clearfix"></div>
        <p>====================</p>
        <h4>获取数据</h4>
        <p>name:{{user.name}}</p>
        <p>====================</p>
        <h4>单向绑定数据</h4>
        <input type="text" :value="user.name" />
        <p>====================</p>
        <h4>绑定事件</h4>
        <button @click="test_1()">test_1</button>
        <p>====================</p>
        <h4>双向绑定数据</h4>
        <input type="text" v-model:value="user.name"/>
        <input type="text" v-model="user.name"/>
        <p>====================</p>
        <h4>循环绑定数据</h4>
        <select>
            <option v-for="(city,index) in cities" :value="city.cityId">
                {{city.cityName}}
            </option>
        </select>
        <table>
            <thead>
                <tr>
                    <td>id</td>
                    <td>name</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(city,index) in cities">
                    <td>{{city.cityId}}</td>
                    <td>{{city.cityName}}</td>
                </tr>
            </tbody>
        </table>
        <p>====================</p>
        <h4>绑定事件</h4>
        <button @click="test_1()">test_1</button>
        <button id="test_2" price="22.33" @click="test_2($event)">test_2</button>
        <p>====================</p>
        <h4>设置自定义模板</h4>
        <button-demo></button-demo>
        <button-count></button-count>
    </div>
</div>
<!-- /page content -->
<script>
    $(function () {
        //alert("this is init function.");
        test_1();
    });

    // 类似于静态方法，须写在myVue之前，否则会报警告信息
    // 组件方式 一
    Vue.component("button-demo",{
        //在原生的标签上添加自己的内容
       template:"<button>button-demo</button>"
    });

    // 定义模板 标签名
    Vue.component("button-count",{
        // 点击一次，加1
        data:function(){
          return {
              count:0,
          }
        },
        methods: {
          count_func: function () {
            this.count += 1;
          }
        },
        // 在原生的标签上添加自己的内容
       template:"<button @click='count_func()'>{{count}}</button>"
    });

    // .vue 组件

    //var 局部变量；let 全局变量；content 常量
    var myVue = new Vue({
        //el 要绑定的元素，指定区域范围
        el: "#myVue",
        data:{
            //定义 bean
            user:{
                name: "Cwd",
                age: 21,
                gender: "male"
            },
            cities:[{
                cityId: "1",
                cityName: "chengdu"
            },{
                cityId: "2",
                cityName: "zhaoqing"
            }]
        },
        //method 与 methods
        methods:{
            test_1:function(){
                console.log(this.user)
            },
            test_2:function(event){
                console.log(event);
                console.log(event.target);
                console.log(event.target.attributes.getNamedItem("price").name);
                console.log(event.target.attributes.getNamedItem("price").value);
            },
            // 定义 js 函数，作用与 Vue 实例
            initCities:function () {
                var countryId = 522;
                var self = this;
                $.ajax({
                    url: "/api/cities/" + countryId,
                    type: "get",
                    success:function (rs) {
                        self.cities = rs;
                        // this.cities = rs;
                        // ajax 中 this 指代了 success，而不是ajax
                    },
                    error:function (rs) {
                    },
                });
            },
        },
        // 将 Vue 赋值给
        created:function(){
          window.test_1 = this.test_1;
        },
        //mounted 生命周期挂钩子 ---- 初始化页面函数的时候，在此处挂钩
        mounted:function () {
            //this.initCities();
        },

    });
</script>